<layout name="all@index/layout" />
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    $(function () {
        var classno=$('#classno');
        $('#dg').datagrid({
            title: '通过率各学院统计情况',
            idField: 'school',
            striped: 'true',
            singleSelect: true,
            rownumbers: true,
            url: '{$ROOT}/census/analyze/query',
            queryParams: {classno:classno.val()},
            showFooter: true,
            toolbar: '#toolbar',
            columns: [[
                {field: 'schoolname', title: '学院', width: 130, align: 'center'}
                ,{field: 'pass', title: '合格', width: 95, align: 'center'}
                ,{field: 'passpercent', title: '合格比例', width: 95, align: 'center',
                    formatter:function(val,rec){
                        return Math.round(100*rec.pass/(parseInt(rec.fail)+parseInt(rec.pass))*100)/100;
                    }}
                ,{field: 'fail', title: '不合格', width: 95, align: 'center'}
                ,{field: 'failpercent', title: '不合格比例', width:95, align: 'center',
                    formatter:function(val,rec){
                        return Math.round(100*rec.fail/(parseInt(rec.fail)+parseInt(rec.pass))*100)/100;
                    }}
                ,{field: 'total', title: '小计', width: 95, align: 'center',
                    formatter:function(val,rec){
                        return parseInt(rec.fail)+parseInt(rec.pass);
                    }}
            ]],
            //标题行右键菜单
            onHeaderContextMenu: function (e, field) {
                e.preventDefault();
                if (!cmenu_obj.cmenu)//没有的话创建一个
                    $('#dg').datagrid('createColumnMenu', cmenu_obj);
                cmenu_obj.cmenu.menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            },
            //数据行上右键菜单
            onRowContextMenu: function (e, rowindex, row) {
                e.preventDefault();
                var tt = $('#dg');
                tt.datagrid('selectRow', rowindex);
                $('#menu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            },
            onSelect: function (rowindex, row) {
                var data=[];
                data.push(['合格',parseFloat(row.pass)]);
                data.push(['不合格',parseFloat(row.fail)]);
                circle(row.schoolname,data);
            },
            onLoadSuccess:function (downdata) {
                var allrows=downdata['rows'];
                var row=allrows[allrows.length-1];
                var data=[];
                data.push(['合格',parseFloat(row.pass)]);
                data.push(['不合格',parseFloat(row.fail)]);
                circle(row.schoolname,data);
            }
        });
        //检索信息
        $("#search").click(function () {
            var tt = $('#dg');
            tt.datagrid('load', {
                classno:classno.val()
            });
        });
    });
    function circle (schoolname,data) {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: schoolname+'通过情况比例'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        };
        var series= [{
            type: 'pie',
            name: '比例',
            data:data
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#circle').highcharts(json);
    }
</script>
<div class="container">
    <div id="left" style="width:640px;float:left">
        <div id="toolbar">
            <div>
                <label for="classno">班号：</label><input id="classno" class="easyui-validatebox" size="4" value="%"/>
                <a href="#" class="easyui-linkbutton"  data-options="iconCls:'icon icon-search',plain:'true'" id="search">检索</a>
            </div>
        </div>
        <table id="dg"></table>
    </div>
    <div id="right" style="width:610px;float:left;padding-left:5px;">
            <div id="circle"></div>
    </div>
    <div class="space"></div>
    <div class="information" style="clear:both">
        <ol>说明：
            <li>选中学院可以查看该学院的合格比例</li>
            <li>统计数据总仅包含有学籍的学生，即正常、休学、延长学业</li>
        </ol>
    </div>
</div>